
import { useEffect, useRef } from 'react'

import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.min.css';
// 图片放大
const IMageViewer: React.FC = ({ children }) => {
    const cantainer = useRef(null);

    useEffect(() => {
        const viewer = new Viewer(cantainer.current as unknown as HTMLElement)
        const observe = new MutationObserver(() => {
            viewer.update()
        })
        observe.observe(cantainer.current as unknown as HTMLElement, {
            subtree: true,
            childList: true
        })
        return () => {
            observe.disconnect()
            viewer.destroy()
        }
    }, [])

    return <div ref={cantainer}>
        {children}
    </div>
}

export default IMageViewer